<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>定制--个性化定制</title>
		<include file="public/comm" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav fs_xl">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left fs_xxi"></a>
			<h1 class="mui-title fs_xl">定制</h1>
		</header>
		<!--下方导航-->
		<div class="mui-content fs_xl" style="overflow: hidden;">
			<div class="pz_dz cls">
				<div class="pz_xz">
					<a class="fs_l">瓶子选择<i class="mui-icon mui-icon-arrowdown fs_xl"></i></a>
					<ul class="pz_ul fs_l" id="pz_xz">
						<li class="mui-icon mui-icon-checkmarkempty active fs_l">红瓶子</li>
						<li>白瓶子</li>
					</ul>
				</div>
				<div class="bk_xz">
					<a class="fs_l">边框选择<i class="mui-icon mui-icon-arrowdown fs_xl"></i></a>
					<ul class="pz_ul fs_l" id="bk_xz">
						<li class="mui-icon mui-icon-checkmarkempty active fs_l">金</li>
						<li>红</li>
						<li>蓝</li>
					</ul>
				</div>
			</div>
			<div class="dz_m">
				<img class="dz_bgimg active" src="../images/pingzi.png" />
				<img class="dz_bgimg" src="../images/bjgy.png" />
				<div class="dz_bk dz_m_js active"></div>
				<div class="dz_bk dz_m_hs"></div>
				<div class="dz_bk dz_m_ls"></div>
				<div class="dz_up" id="preview">
					<img id="imghead" border="0" src="../images/anli.png" width="90" height="90" onclick="$('#doc').click();">
                    <input style="display: none;" type="file" name="file" id="doc" multiple="multiple"  style="width:150px;" onchange="javascript:setImagePreviews();" accept="images/*"  />
					<div id="dd" style=" width:100%;position: absolute;top:0;left:0">
						
					</div>
				</div><!--图片上传-->
				<div class="dz_wz">
					<img src="../images/anli.png" />
					<input class="fs_m" type="text" name="" id="dz_txt" placeholder="请输入你想说的话!" />
					<span class="yc_yl"></span>
				</div>
			</div>
			<div class="dz_nav">
				<a href="javascript:;" class="ylxg">预览效果</a>
				<a href="shejishi.html" class="tel_sj">呼叫设计师</a>
			</div>
		</div>
		<script>
			mui.init();
			var winW = $("body").width();
			var liW = (winW - 1) / 2;
			var winH=$("body").height();
			var dzH=winH-$("header").height()-$(".pz_dz").height()-$(".dz_nav").height()-1;
			$(".dz_m").height(dzH);
			$(".pz_xz,.bk_xz").width(liW);
			$(function(){
				$(".pz_xz a,.bk_xz a").toggle(function(){
					$(this).siblings("ul").show();
				},function(){
					$(this).siblings("ul").hide();
				});
				$(".pz_ul li").click(function(){
					$(this).addClass("mui-icon mui-icon-checkmarkempty fs_l");
					$(this).css("color","#ec2821");
					$(this).siblings().removeClass("mui-icon mui-icon-checkmarkempty fs_l");
					$(this).siblings().css("color","#333");
				});
				$("#pz_xz li").click(function(){
					$("#pz_xz li").removeClass("active").eq($("#pz_xz li").index(this)).addClass("active");
        			$(".dz_bgimg").hide().eq($('#pz_xz li').index(this)).show();
				});
				$("#bk_xz li").click(function(){
					$("#bk_xz li").removeClass("active").eq($("#bk_xz li").index(this)).addClass("active");
        			$(".dz_bk").hide().eq($('#bk_xz li').index(this)).show();
				});
				$(document).click(function(e){
  					var _con = $('.pz_ul');   // 设置目标区域
  					if(!_con.is(e.target) && _con.has(e.target).length === 0){
      				 	$('.pz_ul').hide();
//    				 	$(".pz_ul a i").removeClass("mui-icon-arrowup").addClass("mui-icon-arrowdown");
  					}
				});
				$("#dd").on("click","img",function(){
					$('#doc').click();
				});
				$(".ylxg").click(function(){
					var imgURL=$("#dd img").attr("src");
					var dzWz=$("#dz_txt").val();
					window.location.href="yulan.html?imgurl="+imgURL+"&dzwz="+dzWz;
				})
			})
			function setImagePreviews(avalue) {
       	 		var docObj = document.getElementById("doc");
				var dd = document.getElementById("dd");
				dd.innerHTML = "";
				var fileList = docObj.files;
				for (var i = 0; i < fileList.length; i++) {            
					dd.innerHTML += "<div style='float:left' > <img id='img" + i + "' /> </div>";
					var imgObjPreview = document.getElementById("img"+i); 
					if (docObj.files && docObj.files[i]) {
						//火狐下，直接设img属性
						imgObjPreview.style.display = 'block';
						imgObjPreview.style.width = '100%';
//						imgObjPreview.style.height = '100%';
						//imgObjPreview.src = docObj.files[0].getAsDataURL();
						//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
						imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);
					}else {
						//IE下，使用滤镜
						docObj.select();
						var imgSrc = document.selection.createRange().text;
						alert(imgSrc)
						var localImagId = document.getElementById("img" + i);
						//必须设置初始大小
						localImagId.style.width = "100%";
//						localImagId.style.height = "100%";
						//图片异常的捕捉，防止用户修改后缀来伪造图片
						try {
							localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
							localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
						}catch (e) {
							alert("您上传的图片格式不正确，请重新选择!");
							return false;
						}
						imgObjPreview.style.display = 'none';
						document.selection.empty();
					}
				}  
				return true;
			}
//			$(function(){
//				$(".ylxg").click(function(){
//					var txt1=$("#dz_txt").val();
//					$("#dz_txt").hide();
//					$(".yc_yl").show().text(txt1);
//				})
//			})
		</script>
	</body>

</html>